import React, { Component } from 'react';

import { Checkbox } from 'antd';

import ReduxBa from './ReduxBa'

import { connect } from 'react-redux';

class ReduxB extends Component {
  state = {
    checked: false,
    // checked: JSON.parse(this.props.checkLists).indexOf('reduxB') > -1
    // checkLists: [],
  }

  componentWillMount() {
    console.log(this.props.checkLists instanceof Array)
    console.log(this.props.checkLists)
    let checkLists =  this.props.checkLists
    this.setState({
      checked: checkLists.indexOf('reduxB') > -1
    }) 
  }

  // 更新组件 接受新的 props
  componentWillReceiveProps(nextProps) {
    // 第一次为 string
    // let checkLists = []
    // console.log(this.props.checkLists)
    // console.log(this.props.checkLists instanceof Array)
    // checkLists = this.props.checkLists instanceof Array ? this.props.checkLists : JSON.parse(this.props.checkLists)
    // checkLists.indexOf('reduxB') > -1 ? this.setState({checked: true}) : this.setState({checked: false}) 

    // console.log(nextProps.checkLists[0].length)
    // console.log(nextProps.checkLists[0].indexOf('reduxB') > -1 )
    nextProps.checkLists[0].indexOf('reduxB') > -1 ? this.setState({checked: true}) : this.setState({checked: false}) 
  }


  // 组件更新时调用 修改state 报错？？
  componentWillUpdate(nextProps, nextState) {
    // console.log(nextProps, nextState)
    // let checkLists = []
    // checkLists = nextProps.checkLists instanceof Array ? 
    // this.props.checkLists : JSON.parse(this.props.checkLists)
    // let isReduxB
    // isReduxB = checkLists.indexOf('reduxB')
    // console.log(isReduxB)
    // isReduxB == 2 ? this.setState({checked: false}) : this.setState({checked: true}) 

    // let checkLists = !this.props.checkLists instanceof Array ? 
    //   JSON.parse(this.props.checkLists) : this.props.checkLists
    // let isReduxB = checkLists.indexOf('reduxB')
    // console.log(isReduxB)
    // isReduxB == 2 ? this.setState({checked: false}) : this.setState({checked: true}) 
  }

  onChange = (e) => {
    // Array.prototype.inState将扩展array.prototype因此，
    // 每当您想要使用数组时，instate函数也将被添加到该数组中。
    // 可以添加此行以忽略警告。
    // /*eslint no-extend-native: ["error", { "exceptions": ["Object"] }]*/ to ignore that warning.
    Array.prototype.indexOf = function(val) { 
      for (var i = 0; i < this.length; i++) { 
        if (this[i] === val) return i; 
      } 
      return -1; 
    };
    Array.prototype.remove = function(val) { 
      var index = this.indexOf(val); 
      if (index > -1) { 
        this.splice(index, 1); 
      } 
    };

    // console.log(this.props.checkLists)
    // console.log(`checked = ${e.target.checked}`);
    this.setState({
      checked: e.target.checked
    })
    // console.log(this.props.checkLists)
    let checkLists = []
    if(this.props.checkLists instanceof Array) {
      checkLists = this.props.checkLists
    } else {
      checkLists = JSON.parse(this.props.checkLists)
    }
    let isReduxB = checkLists.indexOf('reduxB') > -1
    if(isReduxB && e.target.checked){
      
    } else if(!isReduxB && e.target.checked) {
      checkLists.push('reduxB')
    } else if(isReduxB && !e.target.checked) {
      checkLists.remove('reduxB')
    } else if(!isReduxB && !e.target.checked) {

    }
    console.log(checkLists)
    this.props.saveCheckList(checkLists)
    // 存值 有问题
    
  }

  render() {
    return (
      <div>
        <Checkbox onChange={this.onChange} checked={this.state.checked}>ReduxB</Checkbox>
        <div>
          <ReduxBa />
        </div>
      </div>
    )
  }

}

const mapStateToProps = (state, ownProps) => {
  const checkLists = state.checkLists
  return { checkLists }
}

const mapDispatchToProps = (dispatch) => {
  return {

    saveCheckList: (checkList) => {
      dispatch({
        type: 'SAVE_CHECKEDLIST',
        checkList: checkList,
      })
    }

  }
}


export default connect(mapStateToProps, mapDispatchToProps)(ReduxB);